<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多级评论，发布文章测试</title>
    <style>
        .box{
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid black;
            display: flex;
            .show{
                width: 80%;
                height: 100%;
                border: 1px solid blue;
                display: flex;
                .left{
                    width: 15%;
                    height: 100%;
                    border: 1px solid black;
                    .create,.update,.delete,.contain{
                        width: 100%;
                        height: 10%;
                        display: flex;
                        align-items: center;
                        border: 1px solid black;
                        justify-content: center;
                    }
                }
                .right{
                    width: 85%;
                    height: 100%;
                    position: relative;
                    .item{
                        width: 100%;
                        height: 15%;
                        display: flex;
                        border-bottom: 1px solid black;
                        img{
                            width: 40px;
                            height: auto;
                        }
                    }
                    /* background-color: aqua; */
                    .title1{   
                        width: 100%;
                        height: 10%;
                        display: flex;
                        font-size: 30px;
                        justify-content: center;
                        align-items: center;
                        font-weight: bolder;
                        border-bottom: 1px solid black;
                        .inputTitle{
                            width: 80%;
                            height: 80%;
                            padding: 0 2%;
                            font-size: 30px;
                            border: none;
                        }
                    }
                    .content{
                        overflow-wrap: break-word;
                        word-break: break-all;
                        white-space: pre-wrap;
                        margin-top: 2%;
                        width: 100%;
                        height: 40%;
                        display: flex;
                        overflow-y: auto;
                        border-bottom: 1px solid black;
                        .inputContent{
                            margin-top: 2%;
                            width: 96%;
                            height: 80%;
                        }
                    }
                    .image1{
                        width: 100%;
                        height: 40%;
                        display: flex;
                        img{
                            width: 80px;
                            height: auto;
                        }
                    }
                    .inputComment{
                        position: absolute;
                        width: 100%;
                        height: 80%;
                        color: blue;
                        top: 20%;
                        background-color: aqua;
                        /* display: none; */
                    }
                }
            }
        }
        .active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="show">
            <div class="left">
                <div class="create">
                    创作文章
                </div>
                <div class="update">
                    更新文章
                </div>
                <div class="delete">
                    删除文章
                </div>
                <div class="contain">
                    收藏文章
                </div>
            </div>
            <div class="right">
                
                    <div class="inputComment">
                        1
                    </div>
                    
                
            </div>
        </div>
        <div class="comment">
            
        </div>
    </div>
</body>
</html>
<script>
    //要创建文章的结构数组才能渲染
    const articleArray=[
       
    ]
    //文章结构不止这些，应该还要加上评论，接下来搞多级评论吧
    let article={
        title:"",
        content:"",
        Imgurl:[]
    }
    //获取左边的文章的点击事件
    const right=document.querySelector('.box .show .right')
    // right.innerHTML=`6`
    document.addEventListener('click',function(event){
        if(event.target.classList.contains('create')&&event.target.closest('.box .show .left')){
            console.log("创作文章按钮被点击")
            right.innerHTML=`
                <div class="title1">
                    <h3>请输入标题</h3>
                </div>
                <div class="content">
                    <p>请输入文章内容</p>
                </div>
                <div class="image1">
                    <p>请输入图片地址</p>
                </div>
                <button class="submit">保存按钮</button>
            `
           
        }
        if(event.target.classList.contains('title1')){
            console.log('标题被点击')
            const title=event.target
            const input = document.createElement('input')
            input.classList.add('inputTitle')
            input.type='text'
            input.value=''
            title.innerHTML=''
            title.appendChild(input)
            input.focus()
            input.addEventListener('blur',function(){
                if(input.value.trim()!=''){
                    title.innerHTML=input.value
                    article.title=input.value
                }
                input.remove()
            })
        }
        if(event.target.classList.contains('content')){
            console.log('文章内容被点击')
            const content=event.target
            const input = document.createElement('textarea')
            input.classList.add('inputContent')
            
            input.value=''
            content.innerHTML=''
            content.appendChild(input)
            input.focus()
            input.addEventListener('blur',function(){
                if(input.value.trim()!=''){
                    content.innerHTML=input.value
                    article.content=input.value
                }
                input.remove()
            })    
        }
        //上传图片(同样，只能上传jpg格式，而且只能上传一张图片)
        if(event.target.classList.contains('image1')){
            const image1=event.target
            console.log('图片被点击')
            const input=document.createElement('input')
            const img=document.createElement('img')
            input.value=''
            image1.appendChild(input)
            input.focus()
            input.addEventListener('blur',function(){
                if(input.value.trim()!=''){
                    img.src=input.value
                    image1.appendChild(img)
                    article.Imgurl.push(input.value)
                }
                input.remove()
            })    
        }
        //提交按钮(发表文章已成功,能够将其存放到文章数组中)
        if(event.target.classList.contains('submit')){
           console.log(article)
           articleArray.push(article)
           //情空右边的页面
           right.innerHTML=``
           console.log(articleArray)
           article={
            title:"",
            content:"",
            Imgurl:[]
            }
           articleArray.forEach(item=>{
            const articleItem=document.createElement('div')
            articleItem.classList.add('item')
            // 生成图片的 HTML
            function generateImagesHtml() {
              let imagesHtml = '';
              item.Imgurl.forEach(imgUrl => {
                imagesHtml += `<img src="${imgUrl}" alt="文章图片">`;
              });
              return imagesHtml;
            }
            articleItem.innerHTML=`
                <h3>${item.title}</h3>
                <p>${item.content}
                ${item.Imgurl.length > 0 ? `<div class="images">${generateImagesHtml()}</div>` : ''};
            `
            right.appendChild(articleItem)
           })
           
           
        }
        
        
        
        
        if(event.target.classList.contains('update')&&event.target.closest('.box .show .left')){
            console.log("更新文章按钮被点击")
        }
        if(event.target.classList.contains('delete')&&event.target.closest('.box .show .left')){
            console.log("删除文章按钮被点击")
        }
        if(event.target.classList.contains('contain')&&event.target.closest('.box .show .left')){
            console.log("收藏文章按钮被点击")
        }
    })
</script>
<script>
    //创建评论
    document.addEventListener('click',function(e){
        if(e.target.classList.contains('comment')){
            //这是输入评论时的页面
            
        }
    })
</script>